<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="hub.cathome.entity.tool.Transfer" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        .row > ul > li{
            text-align: center;
        }
        .row > ul > li:hover{
            background: #169ed8;
        }
        .content {
            width: 1200px;
            height: 600px;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }
        .content .left {
            width: 700px;
            height: 100%;
            border: 1px solid #a6a6c4;
            display: flex;
            flex-direction: column;
        }
        .promulgator{
            line-height: 30px;
            margin: 10px;
            height: 30px;
        }
        .promulgator > img{
            width: 30px;
            height: 30px;
        }
        .cl{
            display: flex;
            flex-direction: row-reverse;
        }
        .cl>*{
            margin: 0 20px 0 0;
        }
        .user{
            line-height: 30px;
            margin: 10px;
        }
        .user > img{
            width: 30px;
            height: 30px;
        }
        .pic{
            height: 600px;
        }
        .content .left .describe {
            flex: 3;
            text-indent: 2em;
        }
        .content .right {
            width: 425px;
            overflow-x: hidden;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            padding: 15px;
            border: 1px solid #99a6c4;
        }
        .title{
            margin: 0 0 10px 0;
        }
        .content .right .comment {
            list-style: none;
            color: #99a6c4;
        }
        .content .right .comment li {
            margin-bottom: 20px;
        }
        .content .right .comment li .user {
            margin-bottom: 10px;
        }
        .content .right .comment li .commentOn p {
            text-indent: 2em;
        }

    </style>
</head>

<body>
<div class="row">
    <jsp:include page="leftbar.jsp"/>
    <div class="col-10">
        <jsp:include page="headbar.jsp"/>
        <div class="content">
            <div class="left">
                <div class="promulgator flex-row" onclick="watchThisUser(${shotBlogAuthor.id})">
                    <c:choose>
                        <c:when test="${shotBlog.images.size()>0}">
                            <img src="${pageContext.request.contextPath}/img_res/${shotBlogAuthor.icon.path}" class="col-1"/>
                        </c:when>
                        <c:otherwise>
                            <img src="" class="col-1"/>
                        </c:otherwise>
                    </c:choose>
                    <a>${shotBlogAuthor.nickname} ${Transfer.DataTransfer(shotBlog.date)}</a>
                </div>
                <div class="pic">
                    <c:choose>
                        <c:when test="${shotBlog.images.size()>0}">
                            <img class="col-10 offset-1" src="${pageContext.request.contextPath}/img_res/${shotBlog.images.get(0).path}" height="400" alt="">
                        </c:when>
                        <c:otherwise>
                            <img src="" alt="">
                        </c:otherwise>
                    </c:choose>
                </div>
                <div class="describe">
                    ${shotBlog.content}
                </div>
                <div class="cl">
                    <c:if test="${user!=null}">
                        <c:if test="${user.id==shotBlog.userId}">
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                                    。。。
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="${pageContext.request.contextPath}/home/shotBlog/edit/${shotBlog.blogId}">编辑随拍</a>
                                    <a class="dropdown-item" href="${pageContext.request.contextPath}/affair/shotBlog/delete/${shotBlog.blogId}">删除随拍</a>
                                </div>
                            </div>
                        </c:if>
                    </c:if>
                    <a class="btn btn-outline-secondary">评论数 ${shotBlog.commentCount}</a>
                    <a class="btn btn-outline-secondary" onclick="giveLike(${shotBlog.blogId})">    赞${shotBlog.likeCount}</a>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    <input id="commentBlock" class="col-9" type="text" value="" placeholder="善语结善缘，恶语伤人心。"/><span class="col-2 offset-1 btn btn-outline-secondary" onclick="commentThisBlog(${shotBlog.blogId})">评论</span>
                </div>
                <ul class="comment">
                    <c:choose>
                        <c:when test="${shotBlog.comments.size()>0}">
                            <c:forEach var="comment" items="${shotBlog.comments}">
                                <li>
                                    <div class="user flex-row" onclick="watchThisUser(${comment.user.id})">
                                        <c:choose>
                                            <c:when test="${comment.user.icon!=null}">
                                                <img src="${pageContext.request.contextPath}/img_res/${comment.user.icon.path}" class="col-1"/>
                                            </c:when>
                                            <c:otherwise>
                                                <img src="" class="col-1"/>
                                            </c:otherwise>
                                        </c:choose>
                                        <a style="white-space: pre">${comment.user.nickname} ${Transfer.DataTransfer(comment.date)}</a>
                                    </div>
                                    <div class="commentOn">
                                        <p>${comment.content}</p>
                                    </div>
                                </li>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            还没有评论
                        </c:otherwise>
                    </c:choose>

                </ul>
            </div>

        </div>
    </div>
</div>
<script>
    function commentThisBlog(id){
        var text = document.getElementById("commentBlock").value;
        console.log(text)
        $.ajax({
            async: false,
            type: "POST",
            url:'${pageContext.request.contextPath}/affair/shotBlog/comment?blogId='+id+"&content="+text,
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "text",
            // success: function() {
            //     window.location.reload();
            // },
            <%--error: function() {--%>
            <%--    $(location).attr("href",'${pageContext.request.contextPath}/nolog')--%>
            <%--},--%>
            complete:function () {
                window.location.reload();
            }
        })
    }
    function watchThisUser(id){
        $(location).attr("href",'${pageContext.request.contextPath}/look/'+id)
    }
    function giveLike(id){
        console.log("hello world")
        $.ajax({
            async: false,
            type: "POST",
            url:'${pageContext.request.contextPath}/affair/shotBlog/like?blogId='+id,
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "text",
            // success: function() {
            //     window.location.reload();
            // },
            <%--error: function() {--%>
            <%--    $(location).attr("href",'${pageContext.request.contextPath}/nolog')--%>
            <%--},--%>
            complete:function () {
                window.location.reload();
            }
        })
    }
</script>
</body>
</html>